<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">导航-1</a></li>
            <li><a href="#">导航-2</a></li>
            <li><a href="#">导航-3</a></li>
            <li><a href="#">导航-4</a></li>
            <li><a href="#">导航-5</a></li>
            <li><a href="#">导航-6</a></li>
        </ul>
    </nav>
    <div id="d1" class="parent">
        <div>
            <h1>message</h1>
            <ol>
                <li><a href="#">div-1</a></li>
                <li><a href="#">div-2</a></li>
                <li><a href="#">div-3</a></li>
                <li><a href="#">div-4</a></li>
                <li><a href="#">div-5</a></li>
            </ol>
        </div>
        <button id="btn1" onclick='addchild()'>添加子节点</button>
        <script>
        let $=function(id){
            return document.getElementById(id);
        }
        let addchild=function(){
            let div=$('d1');
            //为div追加一个子节点
            //1.document.createElement()创建一个新的节点
            let h2=document.createElement("h2");
            //2.h2定义内容
            h2.innerHTML='农大的枫叶红了';
            //3.将新的节点作为div的字节点
            div.appendChild(h2);

        }
    </script>
</body>
</html>